<template>
	<div id="flower">
		<img id="flower-top" :src='$store.state.url+"/img/lfximg/8.jpg"'>
		<div id="page">
			<div id="img">
				<img id="goodimg" :src="$store.state.url+this.picture.goods_coverimg">
				<span class="world">{{this.picture.goods_name}}
				</span>
				<select>
					<option>六枝装</option>
				</select>
				<div class="flower-money">
					<span id="money">
						￥{{this.picture.goods_price}}
					</span>
					<img :src="$store.state.url+'/img/lfximg/homecar.png'"
						@click="changeisclickcar(this.picture.goods_id)">
				</div>
				<addCar v-if="$store.state.isclickcar">
					<template slot="cancel"><span @click="changeisclickcar">取消</span></template>
				</addCar>
			</div>
		</div>
		<div id="rule">
			<div class="rule-bdbox">
				<h2>活动规则</h2>
				<br>
				<p style="font-weight: bold;">花影 · 流金礼品卡规则：</p>
				<p>1、此卡可兑换一款298元月饼礼盒，可补差价但不找零，不兑换现金，不抵扣配送费，不可重复使用；</p>
				<p>2、此卡仅限上海、杭州、苏州、北京地区使用；</p>
				<p>3、月饼礼盒兑换日期为：2021年8月23日至2021年9月30日，逾期作废；</p>
				<p>4、此卡不参与积分活动，不与其它优惠活动同享；</p>
				<p>5、请登录www.mcake.com或拨打4006-678-678订购，订购时请提供卡号及密码。本卡遗失折损不补，请妥善保管。</p>
				<br>
				<p style="font-weight: bold;">月明 · 流苏礼品卡规则：</p>
				<p>1、此卡可兑换一款398元月饼礼盒，可补差价但不找零，不兑换现金，不抵扣配送费，不可重复使用；</p>
				<p>2、此卡仅限上海、杭州、苏州、北京地区使用；</p>
				<p>3、月饼礼盒兑换日期为：2021年8月23日至2021年9月30日，逾期作废；</p>
				<p>4、此卡不参与积分活动，不与其它优惠活动同享；</p>
				<p>5、请拨打 <a href="tel:4006-678-678" style="color:#2700ff;">4006-678-678</a>
					订购，订购时请提供卡号及密码。本卡遗失折损不补，请妥善保管。</p>
			</div>

		</div>
	</div>

</template>

<script>
	import addCar from "../ljy/addcar/addcar.vue"
	export default {

		components: {
			addCar
		},
		data() {
			return {
				arrtotal: "",
				id: "",
				picture: []
			}
		},
		methods: {
			changeisclickcar(goods_id) {
				this.$store.commit("changeGoodsid", goods_id);
				this.$store.commit("changeIsclickcar");
			},
		},
		async mounted() {
			this.arrtotal = this.$store.state
			this.id = this.$route.query
			console.log(this.id.id)
			let getImg = await this.axios.get("/lfx/picture", {
				params: {
					imgId: this.id.id
				}
			})
			console.log(getImg)
			this.picture = getImg.data.answer[0]
			console.log(this.picture)
		},
	}
</script>

<style scoped="scoped" lang="scss">
	#flower {
		#flower-top {
			margin-top: 120px;
		}

		#page:hover {
			box-shadow: 0 4px 4px 0 rgba(0, 0, 0, .5), 0 6px 6px 0 rgba(0, 0, 0, .3), 0 8px 8px 0 rgba(0, 0, 0, .2);
		}

		#page {
			width: 300px;
			padding: 40px;
			transition: all 1s;
			margin-bottom: 80px;

			#goodimg {
				width: 300px;
				height: 200px;
				padding: 30px 30px;
				box-sizing: border-box;
				background-color: #CCCCCC;

			}

			.world {
				display: block;
				height: 40px;
				line-height: 40px;
			}

			select {
				width: 82px;
				height: 33px;
				border-radius: 5px;
				margin: 10px 0;
			}

			span {
				display: inline-block;
				width: 100%;
			}

			.flower-money {
				width: 300px;
				height: 40px;
				display: flex;
				justify-content: space-between;
				align-items: center;

				span {
					display: inline-block;
					width: 60px;
					line-height: 40px;
				}

				img {

					height: 27px;
				}
			}

		}

		#rule {
			background-color: #F5F5F5;

			.rule-bdbox {
				width: 875px;
				height: 584px;
				margin: 0 auto;
				padding: 30px;

				h2 {
					font-weight: 400;
				}

				p {
					font-size: 18px;
				}
			}
		}
	}
</style>
